<template>
  <div class="payment-success card">
    <div class="icon">
      <!-- 在这里添加你的成功图标，可以使用图标字体或者SVG图标 -->
      <img src="../../../assets/image/reg_ok_19_19.jpg" alt="支付成功">
    </div>
    <div class="message">
      <h2>申请成功</h2>
      <p>您已申请成功，我们将尽快处理您的请求。</p>
    </div>
    <!--    <div class="description">-->
    <!--      <p>交易详情：</p>-->
    <!--      <ul>-->
    <!--        <li>订单号：{{ orderNumber }}</li>-->
    <!--        <li>申请金额：{{ paymentAmount }}</li>-->
    <!--        <li>申请时间：{{ paymentTime }}</li>-->
    <!--      </ul>-->
    <!--    </div>-->
    <div class="confirm-button">
      <router-link to="/main/index">返回到首页</router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineEmits} from 'vue';



const emit = defineEmits(['confirm']);

// 这里可以添加一些响应式逻辑，但在这个支付成功的简单页面中可能不需要


</script>

<style scoped>
.payment-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: 35px;
}

.icon {
  img {
    width: 80px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}


.message h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.message p {
  color: #c8c8c8;
}

.description {
  margin-top: 20px;
}

.confirm-button {
  margin-top: 25px;
}

.confirm-button a {
  padding: 15px 100px;
  background-color: #4286f5;
  color: white;
  text-decoration: none;
  border-radius: 4px;

}

.confirm-button a:hover {
  background-color: #4286f5;
}
</style>
